		{% extends "base.html" %}
		
		{% block content %}
		<script type="text/javascript">
			$(document).ready(function() {
				$("input#go1").click(function () { 
					text = $("input[name=content]").attr('value');
					$.ajax({
						url: "/naoborot-result", 
						type: "POST",
						data: ({content : text}),
						dataType: "html",
						success: function(resp){
							$("#result").show().empty().append("<div id='unsel'><b> Ajax: </b></div>" + resp);
							}
					});
				});
				$("input#go2").click(function () { 
					text = $("input[name=content]").attr('value');
					function strrev( string ){
						var ret = '', i = 0;
						for ( i = string.length-1; i >= 0; i-- ){
						   ret += string.charAt(i);
						}
						return ret;
					}
					$("#result").show().empty().append("<div id='unsel'><b> JS: </b></div>" + strrev( text ));
				});
			});
		</script>
		<h3 id="main">Some text<span id="arrow">&rarr;</span>txet emoS<div id="underform">Just for fun project :)</div></h3>
		<!-- <form action="/naoborot-result" method="post"> -->
			<ul id="main">
				<li>
					<div id="overform">Enter your text</div>
					<input name="content" size="45" value="Any text" onfocus="this.value=''">
					<input id="go1" type="submit" value="Invert with AJAX">
					<input id="go2" type="submit" value="Invert with JS">
					<div id="underform">Hallo world!</div>
				</li>
			</ul>
		<!-- </form> -->
		<div id="result" style="display:none"></div>

		{% endblock %}